@charset "UTF-8";
/* 
animation-name:规定需要绑定到选择器的 keyframe 名称。
animation-duration:规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function:规定动画的速度曲线。
animation-delay:	规定在动画开始之前的延迟。
animation-iteration-count:规定动画应该播放的次数。
animation-direction:规定是否应该轮流反向播放动画。infinite无限播放
animation-play-state:running;//paused 停止动画
animation-fill-mode:forwards;//属性规定动画在播放之前或之后，其动画效果是否可见。

简写

 animation: name duration timing-function delay iteration-count direction;
  animation: mymove-1 5s linear 2s 3 linear;
 */
@keyframes mymove-1 {
  0% {
    top: 0px;
  }
  25% {
    top: 200px;
  }
  50% {
    top: 100px;
  }
  75% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}

@keyframes mymove-2 {
  from {
    left: 0px;
  }
  to {
    left: 200px;
    background-color: blue;
  }
}

.donghua .box-1 {
  height: 50px;
  width: 50px;
  background: green;
  position: relative;
  animation: mymove-1 2s linear 0s 2 alternate;
  /* 动画名称 动画时间 速度曲线 延迟 播放次数 是否反向 */
}

.donghua .box-2 {
  height: 50px;
  width: 50px;
  background: red;
  position: relative;
  animation-name: mymove-2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-play-state: running;
  animation-fill-mode: forwards;
}
